<template>
  <div class="bodyy">
    <indextop></indextop>
    <div class="art_main">
      <div class="art_left">
        <div class="art_title">
          <h1>{{ article.title }}</h1>
        </div>
        <div class="user_img">
          <p class="f_left">
            <img
              style="
                width: 40px;
                height: 40px;
                background: url('./static/images/user_h.png');
              "
            />
          </p>
          <div class="art_author f_left">{{ article.author }}</div>
          <div class="art_time f_left">
            <span>{{ article.mod_date }}</span>
            <span>&nbsp;&nbsp;阅读:{{ article.article_views }}</span>
          </div>
        </div>
        <div class="art_content" v-html="article.content"></div>
        <div class="art_dianzan f_left">
          <el-button type="primary" :disabled="zann" @click="zan(1)"
            >赞</el-button
          >
          <span>&nbsp;&nbsp;{{ cont_zan }}人点赞&nbsp;&nbsp;</span>
          <el-button type="primary" :disabled="caii" @click="zan(0)"
            >踩</el-button
          >
        </div>
        <div class="write_comment">
          <img
            style="
              width: 40px;
              height: 40px;
              background: url('./static/images/user_h.png');
              margin-left: 50px;
            "
          />
          <textarea
            cols="30"
            rows="5"
            placeholder="写下你的评论..."
            class="w_pl"
            v-model="content"
          ></textarea>
          <div class="f_right">
            <el-button type="primary" @click="write_comm()">发布</el-button>
            <el-button type="primary">清空</el-button>
          </div>
        </div>
        <div class="coms">
          <h2>精彩评论：</h2>
          <ul class="comments-list" v-if="comments.length != 0">
            <li class="pinglun" v-for="(comm, index) in comments" :key="index">
              <span
                ><img
                  style="
                    width: 40px;
                    height: 40px;
                    float: left;
                    background: url('./static/images/user_h.png');
                  "
                /><span>{{ comm.com_user_name }}</span>
                <p>{{ comm.com_time }}</p></span
              >
              <p>{{ comm.content }}</p>
            </li>
          </ul>
          <p v-else>本文章暂无评论，等你来神评哦！</p>
        </div>
      </div>
      <div class="art_right">
        <div class="user_img" style="margin-top: 15px">
          <p class="f_left">
            <img
              style="
                width: 40px;
                height: 40px;
                background: url('./static/images/user_h.png');
              "
            />
          </p>
          <div class="art_author f_left">{{ article.author }}</div>
          <div class="art_time f_left">
            <span style="margin-left: -68">&nbsp;&nbsp;作品获赞总数:</span>
          </div>
        </div>
        <h2 class="zzxx">作者推荐列表</h2>
      </div>
    </div>
  </div>
</template>
<script>
import indextop from "@/components/index_top";
export default {
  data() {
    return {
      id: null,
      article: {},
      zann: false,
      caii: true,
      art_id: 1,
      cont_zan: 0,
      comments: [],
      zwpl: false,
      content: "",
    };
  },
  components: {
    indextop,
  },
  mounted() {
    this.id = this.$route.query.id;
    this.pageLoad();
  },
  methods: {
    zan(zan_type) {
      if (zan_type == 0 && this.cont_zan <= 0) {
        alert("求求了，别踩了");
        return false;
      } else {
        this.$axios({
          method: "POST",
          url: "api/art_zann/",
          data: {
            art_id: this.art_id,
            art_type: zan_type,
          },
        }).then((res) => {
          // alert("点赞成功！");
          if (zan_type == 1) {
            this.zann = true;
            this.caii = false;
          } else {
            this.zann = false;
            this.caii = true;
          }
          this.cont_zan = res.data.fabulous;
        });
      }
    },
    pageLoad() {
      this.$axios({
        method: "POST",
        url: "api/index_load_data/",
        //    post使用的传值方法
        data: {
          art_id: this.id,
        },
      })
        .then((res) => {
          this.article = res.data.articles;
          this.art_id = res.data.articles.id;
          this.cont_zan = res.data.articles.fabulous;
          this.load_comment(); //初始化评论
          // console.log(res.data.articles);
        })
        .catch((e) => {
          console.log(e);
        });
    },
    load_comment() {
      // alert(this.art_id)
      this.$axios({
        method: "POST",
        url: "api/get_art_comments/",
        data: {
          art_id: this.art_id,
        },
      })
        .then((res) => {
          if (res.data != "NONE") {
            this.comments = res.data;
          } else {
            this.comments = [];
          }
          console.log(res.data);
        })
        .catch((e) => {
          console.log(e);
        });
    },
    write_comm() {
      if (this.content.trim() == "") {
        this.$message({
          message: "警告！评论内容不能为空！",
          type: "warning",
        });
        return;
      }
      this.$axios({
        method: "POST",
        url: "api/write_comments/",
        data: {
          art_id: this.art_id,
          art_content: this.content,
          user_id: this.$session.get("userid"),
          send_obj: "",
        },
      }).then((res) => {
        console.log(res.data);
        this.content = "";
        this.pageLoad();
      });
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  text-align: none;
  text-decoration: none;
}
.bodyy {
  width: 100%;
  height: 100%;
}
.art_main {
  width: 1000px;
  height: 100%;
  margin: 0 auto;
  margin-top: 30px;
  background: #eeededef;
}
.art_right {
  float: right;
  height: 100%;
  width: 29%;
  /* border: 1px solid rgb(211, 203, 219); */
  background: rgb(255, 255, 255);
}
.art_left {
  float: left;
  height: 100%;
  width: 690px;
  /* border: 1px solid rgb(211, 203, 219); */
  background: rgb(255, 255, 255);
}

.zzxx {
  height: 30px;
  text-align: left;
  padding-bottom: 10px;
  border-bottom: 1px solid rgb(226, 223, 223);
}
.art_title {
  float: left;
  padding-top: 20px;
  padding-left: 20px;
}
.user_img {
  width: 260px;
  height: 40px;
  margin-top: 80px;
  margin-left: 20px;
  margin-bottom: 30px;
}
.art_content {
  width: 90%;
  height: 80%;
  font-size: 18px;
  text-align: left;
  margin-left: 20px;
  white-space: pre-line;
}

.f_left {
  float: left;
}
.f_right {
  float: right;
}
.art_author {
  font-size: 18px;
  font-weight: bold;
  padding-left: 15px;
}
.art_time {
  margin-top: -8px;
  padding-left: 15px;

  color: rgb(194, 198, 202);
}
.coms {
  width: 90%;
  height: 100px;
  margin-top: 0px;
  padding-left: 20px;
  padding-top: 20px;
}
.coms h2 {
  float: left;
}
.comments-list {
  width: 90%;
  height: 100px;
  margin-top: 50px;
  margin-left: 0px;
}
.pinglun {
  text-align: left;
  margin-top: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgb(183, 183, 184);
}
.pinglun > span > span {
  font-weight: bold;
  margin-left: 3px;
  font-size: 15px;
}
.pinglun > span > p {
  width: 150px;
  color: rgb(151, 153, 155);
  margin-top: -10px;
  margin-left: 43px;
}
.pinglun > p {
  font-size: 18px;
  font-weight: bold;
  padding-left: 40px;
}
.art_dianzan {
  padding-left: 20px;
  margin-top: 20px;
  border-bottom: rgb(155, 151, 151) 1px solid;
  width: 90%;
  text-align: left;
  font-size: 20px;
  color: rgb(155, 151, 151);
  padding-bottom: 10px;
}
.write_comment {
  width: 90%;
  height: 200px;
  margin-top: 100px;
}
.w_pl {
  width: 80%;
  float: right;
  border: 1px solid rgb(122, 120, 120);
  margin-bottom: 10px;
  padding-left: 10px;
  padding-top: 10px;
}
</style>